import { ReqPage } from "@/api/interface";
import { serviceList, serviceRemove } from "@/api/modules/service/service";
import Empty from "@/components/Empty";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { MessageType } from "@/enums/messageEnum";
import { dataFormat } from "@/utils/format";
import { confirm, showMsg, showTips } from "@/utils/util";
import AppletImg from "./../../../assets/images/applet/applet.png";
import DockerImg from "./../../../assets/images/applet/docker.png";
import { useRoute } from "vue-router";
import ServiceDetailDialog from "./serviceDetailDialog";
import { AuthBtns } from "@/utils/constants";
import { SvcType } from "@/enums/statusEnum";
export default defineComponent({
	setup() {
		const route = useRoute();
		const operateList = inject<any>(AuthBtns.operateList);
		const initParam = reactive<ReqPage>({
			pageIndex: 0,
			pageSize: 20,
			appId: route.query.id,
			template: 1
		});

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		//初始化服务列表
		const getTableList = async (params: any) => {
			return serviceList(params);
		};
		const buttonsList = ref<any>([
			{ path: "add", title: "添加", type: "primary" }
			// { path: "mod", title: "在线更新" }
			// { path: "del", title: "删除", type: "danger" }
		]);
		onMounted(async () => {
			buttonsList.value = operateList.value.some((item: any) => item.component == "service-add")
				? [{ path: "add", title: "添加", type: "primary" }]
				: [];
		});
		const proTable = ref<any>();
		const submitDel = async (dataList: any[]) => {
			if (!dataList.length) {
				showMsg("请选择要删除的服务", MessageType.warning);
				return;
			}
			confirm({ content: "删除服务后无法找回，确定进行当前操作" }).then(async flag => {
				if (!flag) {
					return;
				}
				let { code, message } = await serviceRemove({
					id: dataList.map((item: any) => item.id).join(",")
				});
				let ok = showTips(code, `删除服务`, message);
				if (ok) {
					proTable.value.clearSelection();
					proTable.value.reset();
				}
			});
		};
		const clickBtn = async (fn: string, scope: any) => {
			let selectList = scope?.row ? [scope?.row] : scope?.selectList || [];
			switch (fn) {
				case "add":
					detailDialog.detail = { svcType: "bin" };
					detailDialog.title = "添加服务";
					detailDialog.visible = true;
					break;
				case "del":
					submitDel(selectList);
					break;
				case "mod":
					if (selectList.length != 1) {
						showMsg("请选择一个服务进行修改。", MessageType.warning);
						return;
					}
					detailDialog.detail = { ...selectList[0] };
					detailDialog.title = "修改服务";
					detailDialog.visible = true;
					break;
			}
		};
		onBeforeUnmount(() => {});
		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: "名称", width: "180px" },
			{ prop: "bin", label: "执行文件", width: "200px" },
			{ prop: "svcType", label: "安装方式", width: "100px" },
			{ prop: "key", label: "服务标识", width: "180px" },
			{ prop: "arg", label: "启动参数", width: "180px" },
			{ prop: "path", label: "运行路径", width: "180px" },
			{ prop: "version", label: "版本", width: "180px" },
			{ prop: "createTime", label: "创建时间", width: "180px" },
			{ prop: "updateTime", label: "更新时间", width: "180px" },
			{ prop: "operate", label: "操作", fixed: "right", width: "200px" }
		];
		const submitAdd = async () => {
			detailDialog.visible = false;
			proTable.value.getTableList();
		};
		const detailDialog = reactive<any>({
			detail: {},
			title: "",
			visible: false
		});
		const options = ref(SvcType);
		return () => {
			return (
				<div>
					<ServiceDetailDialog
						v-model:visible={detailDialog.visible}
						title={detailDialog.title}
						onSubmit={submitAdd}
						width="600px"
						detail={detailDialog.detail}
						appId={initParam.appId}
					></ServiceDetailDialog>
					<ProTable
						ref={proTable}
						title={buttonsList.value.length ? "" : "服务管理"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.type}>
											{item.title}
										</el-button>
									);
								});
							},
							name: (scope: any) => {
								return (
									// <el-link type="primary" onClick={() => clickBtn("detail", scope)}>
									<div class="flex justify-center items-center">
										<img style="height:18px;" src={scope.row.svcType == "dockerapp" ? DockerImg : AppletImg}></img>
										<span class="pl-2">{scope.row.name}</span>
									</div>
									// </el-link>
								);
							},
							svcType: (scope: any) => {
								return scope.row.svcType && options.value.filter((item: any) => item.value == scope.row.svcType)[0].label;
							},
							createTime: (scope: any) => {
								return dataFormat("datetime", scope.row.createTime);
							},
							updateTime: (scope: any) => {
								return dataFormat("datetime", scope.row.updateTime);
							},
							operate: (scope: any) => {
								return (
									<>
										{operateList.value.some((item: any) => item.component == "service-del") && (
											<el-link type="primary" link class="iconfont iconbx-file" onClick={() => clickBtn("del", scope)}>
												删除
											</el-link>
										)}
										{operateList.value.some((item: any) => item.component == "service-mod") && (
											<el-link type="primary" link class="iconfont iconbx-file" onClick={() => clickBtn("mod", scope)}>
												更新
											</el-link>
										)}
									</>
								);
							},
							empty: () => {
								return (
									<div>
										<Empty
											class="text-left leading-6"
											subtitle="当前没有任何运行中的服务，您可以添加和上传服务程序来启动相关服务功能。"
											btnText="添加服务"
											onAdd={(scope: any) => clickBtn("add", scope)}
										/>
									</div>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
